﻿/*
    创 建 人     ： 陈 锐
    创 建 时 间  ： 2012.01.17
    参 数 说 明  ： 
        leftGroupId     ： 左边组ID
        rightGroupId    ： 右边组ID
        leftToRightBtn  :  左边组项向右移动按钮ID
        rightToLeftBtn  ： 右边组项向左移动按钮ID
    参 数 形 式  ：
        var api = $("#box").daanGrouper({leftGroupId ：....[,rightGroupId:...]})

    返 回 借 口  ：
        CreateItem: 创建项，只创建不添加到任何组
        AppendToLeft: 将项添加到左边组
        AppendToRight: 将项添加到右边组
        LeftGroup: 左边组对象
        RightGroup: 右边组对象
        ClearLeft: 清空左边组
        ClearRight: 清空右边组
        Clear: 清空左右分组
        GetRightList: 获取右边组项ID，可选参数separator,分隔符

*/
(function ($) {
    String.format = function (source, arg0, argsMore) {
        var result = source;
        for (var i = 1; i < arguments.length; i++) {
            result = result.replace("{" + (i - 1) + "}", arguments[i]);
        }
        return result;
    };

    $.fn.extend({
        daanGrouper: function (option) {
            var setting = $.extend({
                leftGroupId: "#leftGroup",
                rightGroupId: "#rightGroup",
                leftToRightBtn: "#leftToRight",
                rightToLeftBtn: "#rightToLeft"
            }, option);
            var leftGroup = new $.fn.daanGrouper.Group(setting.leftGroupId);
            var rightGroup = new $.fn.daanGrouper.Group(setting.rightGroupId);
            var $leftToRightBtn = $(setting.leftToRightBtn);
            var $rightToLeftBtn = $(setting.rightToLeftBtn);

            var createItem = function (id, name, phone, head) {
                return new $.fn.daanGrouper.Item(id, name, phone, head);
            };

            var appendToLeft = function (item) {
                leftGroup.AppendItem(item);

            };
            var appendToRight = function (item) {
                rightGroup.AppendItem(item);
            };

            var clearLeft = function () {
                leftGroup.Clear();
            };

            var clearRight = function () {
                rightGroup.Clear();
            };

            var clear = function () {
                leftGroup.Clear();
                rightGroup.Clear();
            };

            var getRightList = function (separator) {
                var sep = "|";
                if (separator) {
                    sep = separator;
                }
                alert(rightGroup.AllItems().length);
                var items = rightGroup.AllItems();
                var itemsIds = [];
                for (var i = 0; i < items.length; i++) {
                    itemsIds.push(items[i].Id);
                }
                return itemsIds.join(sep);
            };

            $leftToRightBtn.bind("click", function () {
                var items = leftGroup.CheckedItems();
                leftGroup.RemoveItems(items);
                rightGroup.AppendItems(items);

            });

            $rightToLeftBtn.bind("click", function () {
                var items = rightGroup.CheckedItems();
                rightGroup.RemoveItems(items);
                leftGroup.AppendItems(items);

            });

            return {
                CreateItem: createItem,
                AppendToLeft: appendToLeft,
                AppendToRight: appendToRight,
                LeftGroup: leftGroup,
                RightGroup: rightGroup,
                ClearLeft: clearLeft,
                ClearRight: clearRight,
                Clear: clear,
                GetRightList: getRightList
            };
        }
    });
    $.extend($.fn.daanGrouper, {
        Item: function (id, name, phone, head) {
            var itemTemplate = '<li>\
                                        <div class="user-select">\
                                            <input type="checkbox"/>\
                                        </div>\
                                        <div class="user-info">\
                                            <span>\
                                                <p>\
                                                    {0}</p>\
                                                <p>\
                                                    手机号码：{1}</p>\
                                            </span>\
                                            <img src="{2}" width="50" height="50" />\
                                        </div></li>';
            var itemId = id;
            var outputHtml = $(String.format(itemTemplate, name, phone, head));
            var box = outputHtml.find("li");
            var checkBox = outputHtml.find("input:checkbox")[0];

            var render = function () {

            };

            var check = function () {
                checkBox.checked = true;
                render();
            };

            var unCheck = function () {
                checkBox.checked = false;
                render();
            };

            var inverse = function () {
                checkBox.checked = !checkBox.checked;
                render();
            };

            var isChecked = function () {
                return checkBox.checked;
            };

            return {
                Id: itemId,
                Name: name,
                Phone: phone,
                OutputHtml: outputHtml,
                Check: check,
                UnCheck: unCheck,
                Inverse: inverse,
                IsChecked: isChecked
            };
        },
        Group: function (container) {
            var itemList = [];
            var $container = $(container);

            var init = function () {
                itemList = [];
                $container.empty();
            };

            var render = function () {
                $container.empty();
                for (var i = 0; i < itemList.length; i++) {
                    $container.append(itemList[i].OutputHtml);
                }
            };
            var appendItem = function (item) {
                for (var i = 0; i < itemList.length; i++) {
                    if (item == itemList[i]) {
                        return;
                    }
                }
                itemList.push(item);
                $container.append(item.OutputHtml);
            };

            var appendItems = function (items) {
                for (var i = 0; i < items.length; i++) {
                    appendItem(items[i]);
                }
            };

            var removeItem = function (item) {
                for (var i = 0; i < itemList.length; i++) {
                    var tmpItem = itemList[i];
                    if (item == tmpItem) {
                        itemList.splice(i, 1);
                        render();
                        return;
                    }
                }
            };

            var removeItems = function (items) {
                for (var i = 0; i < items.length; i++) {
                    removeItem(items[i]);
                }
            };

            var checkedItems = function () {
                var checkedList = [];
                for (var i = 0; i < itemList.length; i++) {
                    if (itemList[i].IsChecked()) {
                        checkedList.push(itemList[i]);
                    }
                }
                return checkedList;
            };

            var checkAll = function () {
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].Check();
                }
            }

            var uncheckAll = function () {
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].UnCheck();
                }
            }

            var inverseAll = function () {
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].Inverse();
                }
            }

            var search = function (key, value) {
                var cursor = 0;
                if (typeof value != "string") return;
                for (var i = 0; i < itemList.length; i++) {
                    var tmpItem = itemList[i];
                    if (tmpItem[key].replace(value, "") != tmpItem[key]) {
                        itemList[i] = itemList[cursor];
                        itemList[cursor] = tmpItem;
                        cursor++;
                    }
                }
                render();
            }

            var clear = function () {
                itemList = [];
                $container.empty();
            };

            init();
            return {
                AllItems: function () { return itemList; },
                Render: render,
                AppendItem: appendItem,
                AppendItems: appendItems,
                RemoveItem: removeItem,
                RemoveItems: removeItems,
                CheckedItems: checkedItems,
                CheckAll: checkAll,
                UncheckAll: uncheckAll,
                InverseAll: inverseAll,
                Search: search,
                Clear: clear
            };
        }
    });
})(jQuery);